@page
@model Workflow.Api.Pages.ProcessDesign
@{
    var serverUrl = $"{Request.Scheme}://{Request.Host}";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Elsa Workflows</title>
    <link rel="icon" type="image/png" sizes="32x32" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/assets/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/assets/images/favicon-16x16.png">
    <link rel="stylesheet" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/assets/fonts/inter/inter.css">
    <link rel="stylesheet" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/elsa-workflows-studio.css">
    <script src="/_content/Elsa.Designer.Components.Web/monaco-editor/min/vs/loader.js"></script>
    <script type="module" src="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/elsa-workflows-studio.esm.js"></script>
</head>
<body>
    <elsa-studio-root server-url="@serverUrl" monaco-lib-path="_content/Elsa.Designer.Components.Web/monaco-editor/min">
        <elsa-studio-dashboard></elsa-studio-dashboard>
    </elsa-studio-root>

    <script type="text/javascript">

        function MyCustomInputDriver(elsaStudio) {

            // Get convenience methods.
            const { getOrCreateProperty, htmlToElement } = elsaStudio;

            // Implement the display method, which receives the activity model and the property for which the editor must be rendered.
            this.display = (activity, propertyDescriptor) => {
                // Get the property model.
                const propertyModel = getOrCreateProperty(activity, propertyDescriptor.name);

                // Get the configured default syntax name.
                const defaultSyntax = propertyDescriptor.defaultSyntax || 'Literal';

                // Get the current property value for the default syntax.
                const currentValue = propertyModel.expressions[defaultSyntax] || '';

                // Create a property editor element (for displaying label, hint and syntax toggle).
                // This will wrap our custom control.
                const propertyEditor = document.createElement('elsa-property-editor');

                // Our custom input element control. Can be anything you want.
                // Using HTML string to easily construct an actual element object.
                // Better yet would be to implement a component with Stencil, Angular or React if you;re using any of these frameworks.
                const inputHtml =
                    `<input type="text"
                        class="disabled:elsa-opacity-50 disabled:elsa-cursor-not-allowed focus:elsa-ring-blue-500 focus:elsa-border-blue-500 elsa-block elsa-w-full elsa-min-w-0 elsa-rounded-md sm:elsa-text-sm elsa-border-gray-300"
                        value="${currentValue}"
                        />`;

                // Create an actual input element from the HTML string.
                const inputElement = htmlToElement(inputHtml);

                // Add the custom input control element to the property editor as a child.
                propertyEditor.append(inputElement);

                // Initialize the property editor.
                propertyEditor.propertyDescriptor = propertyDescriptor;
                propertyEditor.propertyModel = propertyModel;
                propertyEditor.activityModel = activity;

                // Setup change handler for custom control that updates the property model.
                inputElement.addEventListener('change', (e) => {
                    const input = e.currentTarget;
                    propertyModel.expressions[defaultSyntax] = input.value;
                });

                // return the created custom control.
                return propertyEditor;
            };
        }

        // Custom input control driver plugin:
        function MyCustomInputPlugin(elsaStudio) {
            // Register custom driver.
            elsaStudio.propertyDisplayManager.addDriver('my-custom-input', () => new MyCustomInputDriver(elsaStudio));
        }

        function ThumbsUpPlugin(elsaStudio) {
            elsaStudio.activityIconProvider.register(
                'ThumbsUp',
                `<span class="elsa-rounded-lg elsa-inline-flex elsa-p-3 elsa-bg-blue-50 elsa-text-blue-700 elsa-ring-4 elsa-ring-white">
                    <svg class="elsa-h-6 elsa-w-6" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
                    </svg>
                </span>`);
        }

        const elsaStudioRoot = document.querySelector('elsa-studio-root');
        elsaStudioRoot.addEventListener('initializing', e => {
            const elsaStudio = e.detail;
            console.log(elsaStudio);
            MyCustomInputPlugin(elsaStudio);
            //elsaStudio.pluginManager.registerPlugin(MyCustomInputPlugin(elsaStudio));
        });

    </script>
</body>

</html>